<!doctype html>
<html lang="en">

<head>
  <title>Title</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="./bootstrap/dist/css/bootstrap.min.css">

  <script src="./jquery/dist/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
  <script src="./bootstrap/dist/js/bootstrap.min.js"></script>


  <script src="./vue/dist/vue.min.js"></script>
  <script src="./moment/moment.js"></script>
  <script src="./moment/locale/zh-cn.js"></script>


    <script src="./popper.js/dist/umd/popper.min.js"></script>
  <link rel="stylesheet" href="./summernote/dist/summernote-bs4.css">

  <script src="./summernote/dist/summernote-bs4.js"></script>
  <script src="./summernote/dist/lang/summernote-zh-CN.min.js"></script>




</head>

<body>



  <div class="jumbotron">
    <h3 class="display-3">amtf</h3>
  </div>


  <div id="foApp" class="container" style="width: 800px; margin: 20px auto;">


    <div class="main" v-show="display == 'main'">



      <div class="card">
        
        <div class="card-footer text-muted">
          <button type="button" class="btn btn-primary"
          @click="fnFileItemModal()">add</button>
        </div>
      </div>

      

      <div class="grid">


          <template v-for="(item, index) in dataList" :key="index">
              <div class="card" style="margin:10px auto;">

                  <div class="card-body">
                      <h4 class="card-title">
                          <span class="text-muted text-wrap">
                              <a :href="'amtj.html?id='+item.sid" target="_blank" class="card-link">{{item.title}}</a>
                              </span>
                      </h4>
                      <!--<p><span class="badge badge-info">{{item.title}}</span></p>-->

                      <!--<p class="card-text">-->

                        <!--<span class="text-muted text-wrap"> -->
                            <!--<a :href="'/file-items/download/'+item.uploadName" class="card-link">{{item.fileName}}</a>-->
                           <!--</span>-->
                        <!--&nbsp; &nbsp;<span class="text-success">  {{item.sizeFmt }} MB</span>-->
                      <!--</p>-->
                      
                      <!--<button type="button" class="btn  btn-primary" @click="fnShowEditModal(item)">edit</button>-->
                      <!--<button type="button" class="btn  btn-danger" @click="fnShowDeleteModal(item)">del</button>-->
                      <!--<a href="#" class="card-link">Another link</a>-->
                  </div>
              </div>
          </template>


      </div>

  </div>



    <!-- 模态框 -->
    <div class="modal fade" id="uploadModal">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">

          <div class="modal-header">
            <h4 class="modal-title">info</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>

          <div class="modal-body">

            <form>

              <div class="form-group">
                <label for="">标题</label>
                <input type="text" name="" id="" class="form-control" v-model="bookForm.title">
                <small id="helpId" class="text-muted">Help text</small>
              </div>

              <div class="form-group">
                <label for="">内容</label>

                  <div id="summernote">{{bookForm.note}}</div>
                <!--<textarea  name="" id="bookNote" rows="5" v-model="bookForm.note"></textarea>-->
              </div>
              

            </form>


          </div>


          <!-- 模态框底部 -->
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">cancel</button>
            <button type="button" class="btn btn-primary" @click="fnSave()">save</button>
          </div>
        </div>
      </div>


    </div>

  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->

  <!-- optionally if you need a theme like font awesome theme you can include it as mentioned below -->
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.5.2/themes/fa/theme.js"></script> -->
  <!-- optionally if you need translation for your language then include  locale file as mentioned below -->
  <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.5.2/js/locales/zh-CN.js"></script>-->


</body>

</html>

<script>






  var vm = new Vue({
      el: '#foApp',
      data: {

          tip: 'ok',
          display: 'main',
          total: 0,
          page: 1,


          dataList: [{},],

          bookForm: {
              title: '',
              note: '',
          }



      },

      computed: {

          pages() {
              return Math.ceil(this.total / 10);
          }
      },

      filters: {

          fmtDate(date) {
              return date + moment(date).format('dddd');
          }
      },


      methods: {


          //新增 article modal
          fnFileItemModal() {
              $('#uploadModal').modal('show');
            
          },






          fnShowDeleteModal(item){

              this.deleteId = item.sid;
              $('#deleteModal').modal('show');
          },




          // 查询 cate
          queryFoList() {

              var _self = this;
              $.ajax({
                  // crossDomain: true,
                  type: "get",
                  url: "../amtfs?sort=udate,desc",
                  // data: "data",
                  dataType: "json",
                  success: function (response) {
                      // console.log(response);
                      if (response.code == 0) {

                          console.log(response);
                          _self.dataList = response.dat;
                      }

                  }
              });
          },

          fnSave(){

          
            var _self = this;

            if(!_self.bookForm.title){
              alert('标题不能为空');
              return ;
            }

            var bookNote = $('#summernote').summernote('code');
            _self.bookForm.note = bookNote;

              $.ajax({
                  // crossDomain: true,
                  type: "post",
                  url: "../amtfs",
                  // data: "data",
                  data: JSON.stringify(_self.bookForm),
                  dataType: "json",
                  contentType: 'application/json',
                  success: function (response) {
                      // console.log(response);
                      if (response.code == 0) {

//                          console.log(response);
//                          _self.dataList = response.dat;
                          _self.queryFoList();
                          $('#uploadModal').modal('hide');
                      }

                  }
              });

          }



      },
      mounted() {


          this.queryFoList();

          $('#summernote').summernote({
              height: 300,                 // set editor height
              minHeight: null,             // set minimum height of editor
              maxHeight: null,             // set maximum height of editor
              focus: true ,                 // set focus to editable area after initializing summernote
              placeholder: '',
              tabsize: 2,
              height: 200,
              lang: 'zh-CN'
          });



      }
  })







</script>